<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/operationsummary/Operations' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工作台</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <br />
    <!-- 页面上方的分标签页 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="个人信息" name="first">
      <PatientSelect/>
      </el-tab-pane>
      <el-tab-pane label="电子病例" name="second">
        <Case/>
      </el-tab-pane>
      <el-tab-pane label="收费记录" name="third">
      <chargeManagement/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
// 导入组件
import Case from "./Case.vue"
import PatientSelect from "./PatientSelect.vue"
import chargeManagement from "./chargeManagement.vue"

export default {
  // 导入的组件写到这里
    components:{
        Case,
        PatientSelect,
        chargeManagement
    },

  data() {
    return {
      // 默认选中的组件
      activeName: "second",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>

</style>